<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>主页面</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--加载meta IE兼容文件-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="header">
		<div class="menu-btn">
			<div class="menu"></div>
		</div>
		<h1 class="logo">
			<a href="index.jsp"> <span>MYBLOG</span> <img src="img/logo.png">
			</a>
		</h1>
		<div class="nav">
			<a href="index" class="active">文章</a> 
			<a href="leacots">留言</a> <a href="album">相册</a> 
			<a href="about">我的文章</a>
		</div>
		<ul class="layui-nav header-down-nav">
			<li class="layui-nav-item"><a href="index" class="active">文章</a></li>
			<li class="layui-nav-item"><a href="leacots">留言</a></li>
			<li class="layui-nav-item"><a href="album">相册</a></li>
			<li class="layui-nav-item"><a href="about">我的文章</a></li>
			<li class="layui-nav-item"><a href="about">文章详情</a></li>
		</ul>
			<div id="blink">
			<p class="welcome-text">
				欢迎<span class="name" style="color: red; font-size: 30px;"><a
					href="album" class="grxx">&nbsp;${user.u_name }&nbsp;</a></span>来到Myblog~
				<a href="#" class="help">帮助</a> <a href="outLogin"
					onClick="return confirm('确定退出吗?');" class="exit">退 出</a>
			</p>
		</div>
	</div>
  
  

	<div class="banner">
		<div class="cont w1000">
			<div class="title">
				<h3>
					MY<br />BLOG
				</h3>
				<h4>well-balanced heart</h4>
			</div>			
		</div>
	</div>

	<div class="content">
		<div class="cont w1000">
		
		<form action="indexArticleSearch" method="get" id="ArticleSearch">
			<input type="text" name="articleSearchText"> 
			<button type="submit">搜索</button>
		</form>
		
		
			<div class="title">
				<span class="layui-breadcr" lay-separator="|"> 
				<c:forEach items="${columntype}" var="columntypez">
				<a href="indexColumntype?a_columnId=${columntypez.a_columnId }" class="active" type-id="${columntypez.a_columnId}">${columntypez.a_cname}</a> 
				</c:forEach>
				</span>
			</div>

			<div class="list-item">
				<c:forEach items="${ArticleContent }" var="article">
					<div class="item" }">
						<div class="layui-fluid">
							<div class="layui-row">
								<div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
									<div class="img">
										<img src="${article.picture.p_content}" style="width: 417px; height: 277px ;" />
									</div>
								</div>
								<div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
									<div class="item-cont">
										<h3>
											${article.a_name }
										</h3><br>
										<h5>作者:${article.a_authorId.u_name}</h5>
										
										<p>${article.a_remark }</p>
										<a href="details?a_id=${article.a_id}" class="go-icon"></a>
									</div>
								</div>
								
							</div>
						</div>
					</div>
				</c:forEach>




			</div>
			<div id="demo" style="text-align: center;"></div>
		</div>
	</div>

	<div class="footer-wrap">
		<div class="footer w1000">
			<div class="qrcode">
				<img src="static/img/erweima.jpg">
			</div>
			<div class="practice-mode">
				<img src="img/down_img.jpg">
				<div class="text">
					<h4 class="title">我的联系方式</h4>
					<p>
						微信<span class="WeChat">1234567890</span>
					</p>
					<p>
						邮箱<span class="email">1234567890@qq.com</span>
					</p>
					<p>
						More Templates <a href="http://www.cssmoban.com/" target="_blank"
							title="模板之家">模板之家</a> - Collect from <a
							href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
					</p>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="layui/layui.js"></script>
	<script type="text/javascript">
	$(".active11").click(function(){
		var a_columnId=$(this).attr("type-id");
		$.post("indexColumntype","a_columnId="+a_columnId,function(article){
			if(article!=null){
				$(".item").remove();
				for (var i = 0; i < article.length; i++) {
					var zhi="<div class='item'}>"+
					"<div class='layui-fluid'> <div class='layui-row'>"+
					"<div class='layui-col-xs12 layui-col-sm4 layui-col-md5'><div class='img'><img src='img/sy_img1.jpg' alt=''></div></div>"+
					"<div class='layui-col-xs12 layui-col-sm8 layui-col-md7'><div class='item-cont'><h3> article.a_name </h3><h5>"+ article.a_columnId +"</h5><br><h5>作者:article.a_authorId </h5><p>article.a_remark </p><a href='details?a_id=article.a_id ' class='go-icon'></a></div></div>"+
					"	</div></div></div>";	
					$(".list-item").append(zhi);
				}
			}
		})
	});
		layui.config({
			base : 'js/util/'
		}).use(
				[ 'element', 'laypage', 'jquery', 'menu' ],
				function() {
					element = layui.element, laypage = layui.laypage,
							$ = layui.$, menu = layui.menu;
					laypage.render({
						elem : 'demo',
						count : 70
					//数据总数，从服务端得到
					});
					menu.init();
				})
				
	</script>
</body>
</html>